<template>
  <div id="login_app">
    <div class="borderd">
      <div class="form-panel">
        <div class="login-logo"></div>
        <el-form
          status-icon
          class="demo-ruleForm"
          :model="form_data"
          :rules="rules"
        >
          <el-form-item prop="username" class="el-item-hhh">
            <el-input
              type="text"
              autocomplete="off"
              placeholder="请输入您的用户名"
              v-model="form_data.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" class="el-item-hhh">
            <el-input
              type="password"
              autocomplete="off"
              placeholder="请输入相应的密码"
              v-model="form_data.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      //表单对应的数据格式
      form_data: {
        username: "admin",
        password: "admin888"
      },
      rules:{
        //表单对应的数据校验
        username:[
          //{校验的规则，required固定的非空校验，message是错误提示，trigger触发校验的事件}
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
      submit(){
        this.$axios.post(
          "/userlogin",this.form_data
        ).then(res=>{
           if(res.code === 200){
              localStorage.setItem("loginData",JSON.stringify(res.list))
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.$router.push("/layout")
           }else{
             this.$message({
                message: res.msg,
                type: 'warning'
              });
           }
           
        })
      }
  }
};
</script>

<style>

#login_app {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to bottom,#ff5a3b,#eb8b7a);
}
#login_app > .borderd {
  width: 900px;
  height: 100vh;
  position: absolute;
  right: 200px;
  background: url("../assets/img/loginbg.png") no-repeat center center;
  background-size: 750px;
}
.form-panel {
  width: 350px;
  height: 500px;
  position: absolute;
  top: 150px;
  right: 120px;
}
#login_app .login-logo {
  width: 350px;
  height: 100px;
  background: url("../assets/img/logo.png");
  background-size: 300px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-top: 30px;
}

#login_app .el-form-item__content>button{
    width: 100%;
    border-radius: 20px;
    background-color: #ff5a3b;
    border: none;
}
#login_app .el-form-item__content>button:hover{
    background-color: #e43516;
}
#login_app .el-input__inner{
    border: none !important;
    border-bottom: 1px #ff5a3b solid !important;
    border-radius: 0;
    background-color: #FFF6F5;
}



.demo-ruleForm{
    margin-top: 100px;
}
.el-item-hhh{
    margin-top: 30px;
}
</style>